<template>
  <div ref="shopInfo" class="shopInfo">
    <div>
      <div class="info pl-3 bg-white pt-3 border-b">
        <h3 class="font-xxl">配送信息</h3>
        <span class="delivery-title mt-2">{{info.description}}</span>
        <span class="grey-2 font-m pl-3">由商家配送提供配送，约{{info.deliveryTime}}分送达，距离{{info.distance}}</span>
        <p class="grey-2 font-m pt-2 pb-4">配送费￥{{info.deliveryPrice}}</p>
      </div>
      <div class="pl-3 bg-white mt-3 border-b pb-4 pt-3">
        <h3 class="font-xxl">活动与服务</h3>
        <ul>
          <li v-for="(item,i) in info.supports" :key="i" class="mt-2">
            <span class="name icon" :class="{green:item.type === 0,red:item.type === 1,orange:item.type === 2}">{{item.name}}</span>
            <span class="font-m black pl-2 grey-2 pr-4">{{item.content}}</span>
          </li>
        </ul>
      </div>
      <div class="pl-3 bg-white mt-3 border-b pb-4 pt-3 pr-3">
        <h3 class="font-xxl">商家实景</h3>
        <div ref="pic_wrapper" style="overflow: hidden">
          <ul ref="picUl" class="display-flex" style="overflow: hidden;width: 645px" >
            <li v-for="(pic,i) in info.pics" :key="i" class="pl-2">
              <img :src="pic" alt="" width="120px" height="90px" >
            </li>
          </ul>
        </div>
      </div>
      <div class="pl-3 bg-white mt-3 border-b pb-4 pt-3 pr-3">
        <h3 class="font-xxl">商家信息</h3>
        <div class="display-flex jc-between border-b pb-3 pt-2">
          <span class="black font-weight">品类</span>
          <span class="grey-2">{{info.category}}</span>
        </div>
        <div class="display-flex jc-between border-b pb-3 pt-2">
          <span class="black font-weight">商家电话</span>
          <span class="grey-2">{{info.phone}}</span>
        </div>
        <div class="display-flex jc-between border-b pb-3 pt-2">
          <span class="black font-weight">地址</span>
          <span class="grey-2">{{info.address}}</span>
        </div>
        <div class="display-flex jc-between border-b pb-3 pt-2">
          <span class="black font-weight">营业时间</span>
          <span class="grey-2">{{info.workTime}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import BScroll from 'better-scroll'
  export default {
    name: "ShopInfo",
    computed:{
      ...mapState({info:'info'})
    },
    data(){
      return {
        realWidth:'100%'
      }
    },
    // methods:{
    //   getUlWidth(){
    //     console.log('ok')
    //     this.$nextTick(()=>{
    //       const res = Array.prototype.slice.call(this.$refs.picUl.children).reduce((preWidth,li)=>{
    //         return preWidth + li.offsetWidth
    //       },0)
    //       this.realWidth = res
    //       console.log(this.$refs.picUl.offsetWidth)
    //       const res1 = new BScroll(this.$refs.pic_wrapper,{
    //         scrollX:true //水平滑动
    //       })
    //       console.log(res1)
    //     })
    //
    //   }
    // },
    mounted() {
      new BScroll(this.$refs.shopInfo,{})
      const res1 = new BScroll(this.$refs.pic_wrapper,{
        scrollX:true //水平滑动
      })
      console.log(res1)
      // this.getUlWidth()
    }
  }
</script>

<style lang="scss" scoped>
  .shopInfo{
    height: calc(100vh - 150px - 38px);
    overflow: hidden;
    .info{
      .delivery-title{
        background-color: #0097ff;
        color: #fff;
        display: inline-block;
        text-align: center;
        padding: 3px 5px;
        border-radius: 4px;
        font-size: 11px;
      }
    }
    .icon{
      color: #fff;
      font-size: 13px;
      padding: 0 5px;
      text-align: center;
      border-radius: 2px;
      &.green{
        background-color: #70bc46;
      }
      &.red{
        background-color: #f07373;
      }
      &.orange {
        background-color: #f1884f;
      }
    }
  }
</style>
